<template>
  <div class="bodys">
    <!-- 头部 -->
    <div class="header">
      <van-icon name="search" @click="toGoodsearch" />
      <span @click="$router.push(`/cityList`)">{{ name }}</span>
      <span @click="$router.push('/login')">登录|注册</span>
    </div>
    <!-- 轮播图 -->
    <div class="food">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <a
            href="#"
            v-for="item in goodone"
            :key="item.id"
            @click="toGoodList(item.title)"
          >
            <img :src="baseurl + item.image_url" alt="" />
            <span>{{ item.title }}</span>
          </a>
        </van-swipe-item>
        <van-swipe-item>
          <a
            href="#"
            v-for="item in goodtwo"
            :key="item.id"
            @click="toGoodList(item.title)"
          >
            <img :src="baseurl + item.image_url" alt="" />
            <span>{{ item.title }}</span>
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 店铺数据列表 -->
    <div class="box">
      <div class="box_hd">
        <i class="iconfont icon-YH-shangjiatubiao"></i><span>附近商家</span>
      </div>
      <div class="box_bd">
        <List v-for="item in ArrLits" :key="item.id" :obj="item"></List>
      </div>
    </div>

    <!-- 底部 -->
    <div class="abb">
      <Bottom :elema="$route.query.val"></Bottom>
    </div>

    <!-- 动漫效果 -->
    <van-dialog v-model="show" :showConfirmButton="false">
      <div class="pig">
        <div class="load_img"></div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Bottom from "./bottom.vue";
import List from "../components/list.vue";
import { entry, shopping } from "../api/Index";

export default {
  components: { Bottom, List },

  created() {
    this.show = true;
    entry().then((res) => {
      console.log(65, res);
      this.goodone = res.data.slice(0, 8);
      this.goodtwo = res.data.slice(8, 16);
    });
    shopping({
      latitude: this.latitude,
      longitude: this.longitude,
    }).then((res) => {
      console.log(74, res);
      this.ArrLits = res.data;
      this.show = false;
    });
  },

  data() {
    return {
      goodone: [],
      goodtwo: [],
      baseurl: "https://fuss10.elemecdn.com/",
      id: this.$route.query.id,
      name: this.$route.query.name || JSON.parse(localStorage.getItem("name")),
      latitude:
        this.$route.query.latitude ||
        JSON.parse(localStorage.getItem("latitude")),
      longitude:
        this.$route.query.longitude ||
        JSON.parse(localStorage.getItem("longitude")),
      ArrLits: [],
      show: false,
    };
  },
  watch: {
    latitude: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("latitude", JSON.stringify(this.latitude));
      },
    },
    longitude: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("longitude", JSON.stringify(this.longitude));
      },
    },
    name: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("name", JSON.stringify(this.name));
      },
    },
  },
  methods: {
    toGoodList(name) {
      this.$router.push({
        path: "/goodList",
        query: {
          latitude: this.latitude,
          longitude: this.longitude,
          name: name,
          nice: this.name,
        },
      });
    },

    toGoodsearch() {
      this.$router.push({
        path: "/goodsearch",
        query: {
          val: "搜索",
          nice: this.name,
          latitude: this.latitude,
          longitude: this.longitude,
        },
      });
    },
  },
};
</script>
   

 <style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3792e5;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__arrow {
    color: #fff;
  }
}

.bodys {
  background-color: #f5f5f5;
  padding: 50px 0;
}

.header {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  width: 100%;
  background-color: #3190e8;
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .van-icon {
    font-size: 30px;
  }
}

.food {
  height: 200px;
  width: 100%;
  background-color: #eee;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;

    background-color: #39a9ed;
    a {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 50%;
      width: 25%;
      background-color: #fff;
      img {
        width: 25px;
        height: 25px;
      }
      span {
        font-size: 13px;
      }
    }
  }
}

.box {
  margin-top: 15px;
  background-color: #fff;
}

.van-dialog {
  z-index: 2002;
  height: 300px;
  background-color: transparent;
}
.pig {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  .load_img {
    width: 100%;
    height: 100%;
    background: url("..//assets/6.png") no-repeat 0 0;
    transform: translateY(0);
    position: relative;
    animation: move 0.6s infinite;
    z-index: 11;
    left: 0;
  }
}

@keyframes move {
  to {
    transform: translate(0, -100%);
  }
}

.abb {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  height: 60px;
  border-top: 1px solid #999;
}
</style>